<template>
  <div class="requestBox">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="请求地址">
        <el-input v-model="form.url" placeholder="请求地址" />
      </el-form-item>
      <el-form-item label="请求参数">
        <el-input v-model="form.param" type="textarea" placeholder="请求参数" />
      </el-form-item>
      <el-form-item label="请求方式">
        <el-radio-group v-model="form.type">
          <el-radio label="GET" />
          <el-radio label="POST" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="返回数据">
        <el-input v-model="form.response" type="textarea" :rows="8" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import request from '@/utils/request'
export default {
  name: 'Request',
  data() {
    return {
      form: {
        url: '/api/admin/adminuser/login',
        param: '"account":"string","password":"string"',
        response: '',
        type: 'POST'
      }
    }
  },
  methods: {
    onSubmit() {
      const that = this

      // 去除空格，换行 然后转为数组
      // const arrayString = that.form.param.replace(/[\r\n\ +]/g, '').split(',')
      // console.log(that.form.param.replace(/[\r\n\ +]/g, '').split(','))
      // // 给key添加引号
      // // const array=arrayString.map(item=>{
      // //
      // // })
      // 测试 参数  "account":"string","password":"string"  地址/api/admin/adminuser/login
      const jsonStr = '{' + that.form.param.replace(/[\r\n\ +]/g, '') + '}'
      const data = JSON.parse(jsonStr)
      // console.log(JSON.parse('{' + that.form.param.replace(/[\r\n]/g, '') + '}'))
      // debugger
      this.$requerst({
        url: that.form.url,
        method: that.form.type,
        data: data
      }).then(response => {
        that.form.response = response
        that.form.response = JSON.stringify(response, null, 4)
        // console.log(that.response)
      }).catch(err => {
        that.form.response = '错误' + err
      })
    }
  }
}
</script>

<style scoped lang="scss">
.requestBox{
  margin: 50px 100px;

}
</style>
